<!DOCTYPE html>
<html lang="en">
<head>
	<title>Lightbox - Transition</title>
	<meta charset="utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />

	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />

	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijlightbox.css" rel="stylesheet" type="text/css"/>
	<script src="../../wijmo/jquery.wijmo.wijlightbox.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(function () {

			$("#lightbox").wijlightbox({
				textPosition: 'titleOverlay'
			});


			$('.option').change(function () {
				$("#lightbox").wijlightbox('option', {
					transAnimation: {animated : $('#animation').val()},
					slideDirection: $('#direction').val()
				});
			});
		});
	</script>
</head>

<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>Transition Animation</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="lightbox">
				<a href="http://lorempixum.com/600/400/abstract/1" rel="wijlightbox[stock];player=img">
					<img src="http://lorempixum.com/150/125/abstract/1" title="abstract 1" alt="abstract 1" /></a>
				<a href="http://lorempixum.com/600/400/abstract/2" rel="wijlightbox[stock];player=img">
					<img src="http://lorempixum.com/150/125/abstract/2" title="abstract 2" alt="abstract 2" /></a>
				<a href="http://lorempixum.com/600/400/abstract/3" rel="wijlightbox[stock];player=img">
					<img src="http://lorempixum.com/150/125/abstract/3" title="abstract 3" alt="abstract 3" /></a>
				<a href="http://lorempixum.com/600/400/abstract/4" rel="wijlightbox[stock];player=img">
					<img src="http://lorempixum.com/150/125/abstract/4" title="abstract 4" alt="abstract 4" /></a>
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
			<!-- Begin options markup -->
				<label>Animation</label>
				<select id="animation" class='option'>
					<option value="fade" selected='true'>fade</option>
					<option value="slide">slide</option>
					<option value="none">none</option>
				</select>

				<label>Slide Direction</label>
				<select id="direction" class='option'>
					<option value="horizontal" selected='true'>horizontal</option>
					<option value="vertical">vertical</option>
				</select>
			<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>This sample demonstrates how to use the transAnimation and slideDirection options to switch between pages of the wijlightbox widget.</p>
		</div>
	</div>
</body>

</html>
